<template>
  <div class="site-topbar">
    <div class="container">
      <div class="topbar-nav">
        <a href="javascript:void(0);"  @click="xiaomiSC">小米商城</a>
        <span class="sep">|</span>
        <a href="">MIUI</a>
        <span class="sep">|</span>
        <a href="">loT</a>
        <span class="sep">|</span>
        <a href="">云服务</a>
        <span class="sep">|</span>
        <a href="">金融</a>
        <span class="sep">|</span>
        <a href="">有品</a>
        <span class="sep">|</span>
        <a href="">小爱开放平台</a>
        <span class="sep">|</span>
        <a href="">企业团购</a>
        <span class="sep">|</span>
        <a href="">资质证照</a>
        <span class="sep">|</span>
        <a href="">协议规则</a>
        <span class="sep">|</span>
        <a href="">下载app</a>
        <span class="sep">|</span>
        <a href="">智能生活</a>
        <span class="sep">|</span>
        <a href="">Select Location</a>
      </div>
      <div class="topbar-cart">
        <a
          class="cart-mini"
          href=""
          @mouseover="showCart"
          @mouseleave="closeCart"
        >
          <em class="iconfont icon-icon-test2"></em>
          <em class="hide">购物车</em>
        </a>
        <div class="cart-menu" :style="{ height: CartHeight + 'px' }">
          <div class="menu-content" @mouseover="keepActive" @mouseout="disActive">
            <span>购物车还没有东东哦</span>
          </div>
        </div>
      </div>
      <div class="topbar-info">
        <a href="" class="link">登入</a>
        <span class="sep">|</span>
        <a href="" class="link">注册</a>
        <span class="sep">|</span>
        <a href="" class="link">消息通知</a>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "SiteTopbar",
  data() {
    return {
      CartHeight: 0,
    };
  },
  methods: {
    showCart() {
      this.CartHeight = 100;
      var cart = document.querySelector('.cart-mini');
      cart.style.color = '#ff6700';
      cart.style.background = '#fff'


    },
    closeCart() {
      this.CartHeight = 0;
      var cart = document.querySelector('.cart-mini');
        cart.style.color = '';
        cart.style.background = ''
     
    },
    keepActive(){
       this.CartHeight = 100;
        var cart = document.querySelector('.cart-mini');
        cart.style.color = '#ff6700';
        cart.style.background = '#fff'
    },
    disActive(){
      this.CartHeight = 0;
      var cart = document.querySelector('.cart-mini');
        cart.style.color = '';
        cart.style.background = ''
    },
    xiaomiSC(){
     
      //犯了个很基础错误，不该把东西写App.vue, { path: '/', redirect: '/login' },在App的添加 <!-- <router-view></router-view> -->，即可渲染出
      this.$router.push({ path: '/New_Page/test' })
    }
  },
};
</script>

<style lang="less" scoped>
.site-topbar {
  position: relative;
  top: 120px;
  z-index: 30;
  height: 40px;
  font-size: 12px;
  color: #b0b0b0;
  background: #333;
  a {
    color: #b0b0b0;
    line-height: 40px;
    display: inline-block;
  }
  a:hover {
    color: #fff;
  }
  .sep {
    margin: 0.3em;
    color: #424242;
  }
  .container {
    width: 1226px;
    height: 40px;
    margin-right: auto;
    margin-left: auto;
    .topbar-nav {
      float: left;
      height: 40px;
      line-height: 40px;
    }
    .topbar-info {
      position: relative;
      float: right;
      height: 40px;
      line-height: 40px;
      .sep {
        margin: 0;
      }
      .link {
        padding: 0 5px;
      }
    }
    .topbar-cart {
      position: relative;
      float: right;
      width: 120px;
      height: 40px;
      margin-left: 15px;
      -webkit-transition: all 0.2s;
      transition: all 0.2s;
      font-size: 12px !important;
      .cart-mini {
        position: relative;
        z-index: 32;
        display: block;
        height: 40px;
        line-height: 40px;
        text-align: center;
        color: #b0b0b0;
        background: #424242;
        font-size: 12px !important;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      // .cart-mini:hover {
      //   color: #ff6700;
      //   background: #fff;
      // }
      em {
        margin-right: 4px;
        font-size: 20px;
        line-height: 20px;
        vertical-align: -4px;
      }
      .hide {
        font-size: 12px !important;
        font-style: normal;
      }
    }
  }
}
// 单独把弹出的盒子css放出来,方便观看
.cart-menu {
  position: absolute;
  right: 0;
  top: 40px;
  z-index: 31;
  width: 316px;
  // height: 100px;
  height: 0;
  color: #424242;
  background: #fff;
  -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  -webkit-transition: height 0.3s;
  transition: height 0.3s;
  .menu-content {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

</style>